import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { ListItem, ListInfo, LoadMore } from "../style";
import { actionCreators } from "../store";

class List extends PureComponent {
    constructor(props) {
        super(props);
    }
    render() {
        const { articleList, getMoreList, page } = this.props;

        return (
            <ul>
                {articleList.map((item, index) => (
                    <Link key={index} to={`/detail/${item.get("id")}`}>
                        <ListItem>
                            <img
                                className="pic"
                                src={item.get("imgUrl")}
                                alt={item.get("title")}
                            />
                            <ListInfo>
                                <h3 className="title">{item.get("title")}</h3>
                                <p className="desc">{item.get("desc")}</p>
                            </ListInfo>
                        </ListItem>
                    </Link>
                ))}
                <LoadMore onClick={() => getMoreList(page)}>加载更多</LoadMore>
            </ul>
        );
    }
}

const mapStateToProps = state => ({
    articleList: state.getIn(["home", "articleList"]),
    page: state.getIn(["home", "articlePage"])
});

const mapDispatchToProps = dispatch => ({
    getMoreList(page) {
        dispatch(actionCreators.getMoreList(page));
    }
});

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(List);
